<template>
  <div class="category-tree">
    <el-tree
      :data="categoryTree"
      :props="defaultProps"
      :expand-on-click-node="false"
      node-key="categoryId"
      default-expand-all
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span v-if="data.status === '1'" class="status-tag">
          <el-tag size="mini" type="danger">停用</el-tag>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { getCategoryTree } from '@/api/cms/category'

export default {
  name: 'CategoryTree',
  data() {
    return {
      categoryTree: [],
      defaultProps: {
        children: 'children',
        label: 'categoryName'
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      getCategoryTree().then(response => {
        this.categoryTree = response.data
      })
    },
    handleNodeClick(data) {
      this.$emit('node-click', data)
    },
    refresh() {
      this.getTree()
    }
  }
}
</script>

<style scoped>
.category-tree {
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.status-tag {
  margin-left: 10px;
}
</style>
